window.onload = function(){
	var navClassify = document.querySelectorAll(".details-classify");
	var detailsList = document.querySelector(".details-list");
	//将收支明细的内容用数组封装
	var details = [{"title":"提现","money":"-275.50","day":"2016-03-01","time":"18:06:15","way":"微信零钱","classify":"tixian"},
		{"title":"订单手续补贴","money":"+0.10","day":"2016-02-29","time":"17:13:42","way":"微信支付-代销","classify":"entry"},
		{"title":"订单入账手续费","money":"-0.20","day":"2016-02-29","time":"17:13:42","way":"微信支付-代销","classify":"entry"},
		{"title":"收银台","money":"+10.00","day":"2016-02-29","time":"17:13:42","way":"微信支付-代销","classify":"entry"}
	];
	function liInfo(title,money,day,time,way){
		return `<div class="consume">
					<h4>${title}</h4>
					<p class="moneySum">${money}</p>
				</div>
				<div class="item-label">
					<p class="consumeTime">
						<span class="day">${day}</span>
						<span class="time">${time}</span>
					</p>
					<p class="payWAy">${way}</p>
				</div>`;
	};
	//清空ul中的li
	function removeLi(){
		while(detailsList.firstElementChild){
			detailsList.removeChild(detailsList.firstElementChild);
		};
	};
	//动态创建li
	function createLi(str){
		var li = document.createElement("li");
		li.classList.add("list-item");
		li.innerHTML=liInfo(str.title,str.money,str.day,str.time,str.way);
		detailsList.appendChild(li);
		clickLi(li,str);
	};
	//点击之后创建清空ul，创建li，
	function addLi(a) {
		removeLi();
		details.forEach(function(e,i){
			if(a=="all"){
				var j = e;
				createLi(j);
			}else if(a=="income" && e.classify=="entry"){
				var j = e;
				createLi(j);
			}else if(a=="earn" && e.classify=="tixian") {
				var j = e;
				createLi(j);
			}
		});
		listNull();
	};
	//载入页面时执行函数
	addLi();
	//给导航栏循环添加点击事件
	for(var i=0;i<navClassify.length;i++){
		//点击导航栏跳转，为当前导航栏添加样式
		navClassify[i].addEventListener("click",function(){
			for(var j=0;j<navClassify.length;j++){
				navClassify[j].classList.remove("details-current");
			}
			this.classList.add("details-current");
			//点击之后，清空ul，再根据对应的导航进行分类后展示对应的li
			if(this.classList.contains("details-all")){
				addLi("all");
			}else if(this.classList.contains("details-income")){
				addLi("income");
			}else if(this.classList.contains("details-earn")){
				addLi("earn");
			}
			//给对应的金额添加不同的颜色
			addColor();
		});
	}
	//为每个li添加点击事件，跳转页面
	function clickLi(l,item) {
//		var listItem = document.querySelectorAll(".list-item");
//		var listArr = Array.prototype.slice.call(listItem);
		l.addEventListener("click",function(){
			location.href=location.origin+"/YouBeiShop/src/html/a_particulars.html";
			localStorage.setItem('details',JSON.stringify(item));
		});
	};
	//为收支金额添加不同的颜色
	function addColor() {
		var moneySum = document.querySelectorAll(".moneySum");
		var arr = Array.prototype.slice.call(moneySum);
		arr.forEach(function(ele,index){
			if(ele.innerText.charAt(0)=="+"){
				ele.classList.add("positiveColor");
			}else if(ele.innerText.charAt(0)=="-"){
				ele.classList.add("negativeColor");
			}
		})
	};
	addColor();
	//如果ul中的没有li，就显示没有相关订单
	function listNull() {
		var noList = document.querySelector(".no-list");
		if(detailsList.children.length==0){
			document.body.style.backgroundColor="#f3f4f6";
			noList.style.display="block";
		}else {
			document.body.style.backgroundColor="#fff";
			noList.style.display="none";
		}
	}
	listNull();
	//收支明细弹窗
	var detailsExplain = document.querySelector(".detailsExplain");
	var explainImg = document.querySelector("#explainImg");
	explainImg.addEventListener("click",function(){
		detailsExplain.style.display="block";
	})
	var gotIt = document.querySelector("#gotIt");
	gotIt.addEventListener("click",function(){
		detailsExplain.style.display="none";
	})
}

